<template>
  <div class="table-container">
    <a-table
      :columns="columns"
      :data-source="pagination.items"
      :loading="tableLoading"
      size="middle"
      :scroll="{ x: 800 }"
      :pagination="paginationProps"
    >
      <template #mobile="text, row">
        {{ text | empty }}
        <a-icon type="check-circle" class="icon" v-if="row.user_info.user_bank_card_status" />
      </template>

      <template #email="text, row">
        {{ text | empty }}
        <a-icon type="check-circle" class="icon" v-if="row.user_info.user_email_status" />
      </template>

      <template #user_info_blank="text, row">
        {{ row.user_info.user_bank_card_status ? '绑定成功' : '/' }}
      </template>
      <template #first_name="text, row">
        <a href="javascript:;" @click="hanlderCheck(row)">{{ text }}</a>
      </template>
      <!-- <template #action="text, row">
        <div class="actions-container">
          <a href="javascript:;" @click="edit(row)">编辑</a>
          <a href="javascript:;">启用</a>
          <a href="javascript:;">删除</a>
        </div>
      </template> -->
    </a-table>
  </div>
</template>
<script>
import { getRegisterUsers } from '@/api/flow/user'
import table from '@/utils/mixins/search/table'

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: 'center',
    width: 100,
    customRender: (text, record, index) => `${index + 1}`,
  },
  {
    title: '姓',
    dataIndex: 'last_name',
    scopedSlots: { customRender: 'last_name' },
  },
  {
    title: '名',
    dataIndex: 'first_name',
    scopedSlots: { customRender: 'first_name' },
  },
  {
    title: '手机号',
    dataIndex: 'mobile',
    scopedSlots: { customRender: 'mobile' },
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    scopedSlots: { customRender: 'email' },
  },
  {
    title: '注册时间',
    dataIndex: 'create_user_time',
    scopedSlots: { customRender: 'create_user_time' },
  },
  // {
  //   title: '手机认证',
  //   dataIndex: 'user_info',
  //   scopedSlots: { customRender: 'user_info_moblie' },
  // },
  {
    title: '银行卡绑定',
    dataIndex: 'user_info',
    scopedSlots: { customRender: 'user_info_blank' },
  },
]

export default {
  mixins: [table],

  data () {
    return {
      columns,
    }
  },
  created () {
    this.tableHooksRequest()
  },

  computed: {
    hasSelected () {
      return this.selectedRowKeys.length > 0
    },

    tableParams () {
      const { per_page, page } = this.pagination
      return [per_page, page, this.tableArgs]
    },
  },
  methods: {
    async tableHooksRequest () {
      try {
        const res = await this.getTableDatas(getRegisterUsers, this.tableParams)
        return res
      } catch (error) {
        throw new Error(error)
      }
    },

    hanlderCheck ({ id: uid }) {
      this.$router.push({
        name: 'RegisterUserDetailsContent',
        params: {
          uid,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.table-container {
  .alert-info-container {
    margin-bottom: $margin-xs;
  }

  .icon {
    color: $theme-color;
  }

  .actions-container {
    a {
      margin-left: $margin-base;
    }
  }
}
</style>
